<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="refresh" content="1.8">
  <title>Document</title>
  <style>
    canvas{
      border: 1px solid black;
      width: 1000px;
      height: 600px;  
      margin-left: 700px;
    }
    body{
      margin: 0px;
    }
  </style>
</head>
<body>  
  <canvas id="myCanvas">
    爸爸您的浏览器不支持 HTML5 Canvas.
  </canvas>
  <script>
    //获取一个画布的渲染上下文,然后为所欲为吧    
    const c=document.getElementById("myCanvas")
    const cxt=c.getContext("2d")
    //绘制背景色,也用画矩形的方法
    // cxt.fillStyle = "gray"
    // cxt.fillRect(0,0,c.width,c.height)

    

  {
    //用moveTolineTo的方法绘制背景色
   cxt.fillStyle = "lightgray"
   cxt.beginPath()
   cxt.moveTo(0,0)
   cxt.lineTo(c.width,0)
   cxt.lineTo(c.width,c.height)
   cxt.lineTo(0,c.height)
   cxt.stroke()
   cxt.fill()  //关键在fill()才有填充后的背景颜色,否则只有边框   
   }
  
    cxt.font="italic 600 30px SimSun"    
    const txtwidth = cxt.measureText("挡板小游戏").width;
    const txtheight = cxt.measureText("M").width;    
    const xpos = (c.width - txtwidth)/2;
    const ypos = c.height/2;
    console.log(txtwidth,txtheight,xpos)//输出可以从浏览器--开发人员工具中的console中看到
    //const grd = cxt.createLinearGradient(xpos,ypos-txtheight,xpos,ypos+txtheight);
    const grd = cxt.createLinearGradient(xpos,ypos-txtheight,xpos+txtwidth,ypos-txtheight);
    grd.addColorStop(0, "red");
    grd.addColorStop(0.5, "yellow");
    grd.addColorStop(1, "blue");
    cxt.fillStyle = grd;
    cxt.textBaseline = "middle";
    cxt.fillText("挡板小游戏",xpos,ypos,600) 
    //cxt.fillRect(txtwidth,0,100,100)
  
    //画一个右侧挡板
    const panelHeight = 50
    const grd1 = cxt.createRadialGradient(c.width-5,c.height/2-30,0,c.width,c.height/2-160,200);
    grd1.addColorStop(0, "red");
    grd1.addColorStop(0.5, "yellow");
    grd1.addColorStop(1, "blue");
    cxt.fillStyle = grd1
    cxt.fillRect(c.width-5,c.height/2-30,c.width,c.height/2-10)

    //再画一个左挡板
    cxt.fillStyle = "yellow"
    cxt.fillRect(0,c.height/2-30,5,c.height/2-10)

  // {
  // //画一条分界线
  // const grd = cxt.createLinearGradient(c.width/2,0,c.width/2,c.height);
  // grd.addColorStop(0, "whitesmoke");
  // grd.addColorStop(0.25, "#ffffff00");
  // grd.addColorStop(0.5, "whitesmoke");
  // grd.addColorStop(0.75, "#ffffff00");
  // grd.addColorStop(1, "whitesmoke");
  // cxt.strokeStyle = grd
  // cxt.lineWidth = 1
  // cxt.beginPath()
  // cxt.moveTo(c.width/2,0)
  // cxt.lineTo(c.width/2,c.height)
  // cxt.stroke()
  // }
{
  let end=0
  cxt.strokeStyle = "whitesmoke"
  cxt.lineWidth = 1
  for(let i=0;i<c.height;){    
    cxt.beginPath()
    cxt.moveTo(c.width/2,i)
    i+=10
    cxt.lineTo(c.width/2,i)
    cxt.stroke()
    i+=10
  }
}

    // cxt.shadowBlur = 1
    // cxt.shadowColor = "blue"
    // cxt.shadowOffsetX = 2
    // cxt.shadowOffsetY = 2
    // const panelHeight = 50
    // cxt.lineWidth = 10
    // cxt.lineCap = "round"
    // cxt.strokeStyle = "black";
    // cxt.beginPath()
    // cxt.moveTo(c.width-5,(c.height-panelHeight)/2)
    // cxt.lineTo(c.width-5,(c.height+panelHeight)/2)
    // cxt.stroke()
   
  //  //绘制小球
  //  {
  //   //第一种方法,使用arcTo()
  //   //这部分变量起到了为公式解耦的作用,做到了仅调整圆心的值和半径的值,即可画出想要的圆
  //  const radius = 10
  //  const pos = {x:c.width/2,y:c.height/2}
  //  const pos1 = {x:pos.x+radius,y:pos.y}
  //  const pos2 = {x:pos.x,y:pos.y+radius}
  //  const pos3 = {x:pos.x-radius,y:pos.y}
  //  const pos4 = {x:pos.x,y:pos.y-radius}
  
   
  //  cxt.fillStyle = "blue"
  //  cxt.beginPath()
  //  cxt.moveTo(pos1.x,pos1.y)
  //  cxt.arcTo(pos1.x,pos1.y+radius,pos2.x,pos2.y,radius)
  //  cxt.arcTo(pos2.x-radius,pos2.y,pos3.x,pos3.y,radius)
  //  cxt.arcTo(pos3.x,pos3.y-radius,pos4.x,pos4.y,radius)
  //  cxt.arcTo(pos4.x+radius,pos4.y,pos1.x,pos1.y,radius)
  //  cxt.fill()
  //  }
   {
    //第二种方法,使用arc()
    const radius = 10
    const pos = {x:c.width/2,y:c.height/2}
    cxt.fillStyle = "white"
    cxt.beginPath()
    cxt.arc(pos.x,pos.y,radius,0,Math.PI*2)
    cxt.fill()   
   }
   {
    //尝试画个碗
    const radius = 50,
       pos = {x:c.width/2,y:c.height/2}
    
    //cxt.lineCap = "round"
    cxt.strokeStyle = "black"
    cxt.lineWidth = 2
    cxt.beginPath()
    cxt.arc(pos.x,pos.y,radius,0,Math.PI)

    //画下半弧
    cxt.moveTo(pos.x+radius,pos.y)
    cxt.arcTo(pos.x,pos.y+10,pos.x-radius,pos.y,5*radius+10)
    cxt.fillStyle = "yellow"
    cxt.fill() 
    cxt.stroke()
    //画上半弧
    cxt.beginPath()
    cxt.moveTo(pos.x+radius,pos.y)
    cxt.arcTo(pos.x,pos.y+10,pos.x-radius,pos.y,5*radius+10)
    cxt.moveTo(pos.x-radius,pos.y)
    cxt.arcTo(pos.x,pos.y-10,pos.x+radius,pos.y,5*radius+10)//第一个点是切点，切点是弧达到的最高点
    cxt.fillStyle = "white"
    cxt.fill() 
    

    cxt.stroke() 
   
    
   }
   {
    cxt.strokeStyle = "red"
      cxt.moveTo(0,0)
      cxt.lineTo(c.width,c.height)
      cxt.moveTo(c.width,0)
      cxt.lineTo(0,c.height)
      cxt.stroke()

    }

  </script>
  <h1>1235512123356</h1>
</body>
</html>